<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<%@ include file="/head.jsp" %>

<body style="height: 100%">

<form class="layui-form" action="">

    <input th:value="1" hidden th:name="isOfficial">
    <div class="layui-form-item">
        <label class="layui-form-label">拍品标题</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
            <input type="text" th:name="title" lay-verify="required" placeholder="请输入拍品标题"
                   class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">一级分类</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
            <select th:name="stPid" th:id="stPid" lay-filter="stPid" >
                <option value="a">一级分类</option>
                <option th:each="type,status : ${ptypes}" th:value="${type.stId}" th:text="${type.stName}"></option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">二级分类</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
            <select th:id="stId" th:name="stId" >
                <option value="a">二级分类</option>
                <option th:each="type,status : ${types}" th:value="${type.stId}" th:text="${type.stName}"></option>
            </select>
        </div>
    </div>


    <div id="uploader" class="layui-form-item">
        <label class="layui-form-label">上传图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> <span style="color: red">图片长宽比例 1:1</span>
            <div class="layui-upload-list">
                <table id="upload_table" class="layui-table">
                    <thead>
                    <tr>
                        <th>图片</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="demoList"></tbody>
                </table>
            </div>
            <button type="button" class="layui-btn" id="testListAction">开始上传</button>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">拍品描述</label>
        <div class="layui-input-block">
            <script id="editor" type="text/plain" style="width: 1000px;height: 500px;">
            </script>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">开拍时间</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" th:id="startTime"
                   placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">结束时间</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" th:id="endTime"
                   placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off">
        </div>
    </div>

    <div class="layui-form-item" th:id="goodsCode">
        <label class="layui-form-label">送拍编号</label>
        <div class="layui-input-block">
            <input type="text" th:id="goodsCode" th:name="goodsCode" placeholder="请输入送拍编号"
                   class="layui-input"/>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button th:id="btn" class="layui-btn" lay-submit="" lay-filter="commit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script th:inline="none">

    var ue = UE.getEditor('editor');

    layui.use(['upload', 'jquery', 'form', 'util', 'laydate'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , form = layui.form
            , laydate = layui.laydate;

        laydate.render({
            elem: '#startTime'
            , type: 'datetime'
            , trigger: 'click' //采用click弹出
        });

        laydate.render({
            elem: '#endTime'
            , type: 'datetime'
            , trigger: 'click' //采用click弹出
        });

        //监听提交
        form.on('submit(commit)', function (data) {

            var stPid = $("#stPid").val();
            if (stPid == 'a') {
                layer.msg('请选择一级分类', {icon: 2, time: 1000});
                return false;
            }

            var stId = $("#stId").val();
            if (stId == 'a' || stId == '') {
                layer.msg('请选择二级分类', {icon: 2, time: 1000});
                return false;
            }

            var imgurlstr = ''
            var array = $(".imgurl");
            array.each(function (i, n) {
                if (i + 1 == array.length) {
                    imgurlstr = imgurlstr + $(n).val();
                } else {
                    imgurlstr = imgurlstr + $(n).val() + ",";
                }
            })
            if (imgurlstr == ''){
                layer.msg('请上传图片', {icon: 2, time: 1000});
                return false;
            }
            data.field.goodsImg = imgurlstr;
            data.field.startTime = new Date($("#startTime").val());
            data.field.endTime = new Date($("#endTime").val());
            data.field.goodsDesc = UE.getEditor('editor').getContent();
            $.ajax({
                url: '/bg/goods/add',
                type: 'post',
                dataType: 'json',
                data: data.field,
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg(data.msg, {icon: 1, time: 500}, function () {
                            layer.close();
                            window.parent.location.reload();
                        });
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });

        form.on('select(stPid)', function (data) {
            $.ajax({
                url: '/bg/type/findByStPid',
                type: 'post',
                dataType: 'json',
                data: {
                    stPid: data.value
                },
                success: function (data) {
                    var aa = '<option value="">二级分类</option>';
                    var str = aa;
                    //渲染之前要清空之前的数据
                    $("#stId").empty();

                    $.each(data, function (index, item) {
                        str += "<option value=" + item.stId + ">" + item.stName + "</option>";
                    });
                    $("#stId").append(str);
                    form.render('select');
                }
            })
        });


        //多文件列表示例
        var demoListView = $('#demoList')
            , uploadListIns = upload.render({
            elem: '#testList'
            , url: '/uploadFiles/uploadFileToOSS'
            , accept: 'file'
            , multiple: true
            , auto: false
            , bindAction: '#testListAction'
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td><img><input type="text" hidden class="imgurl" id="img-' + index + '"></td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button type="button" class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        , '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);

                    $img = tr.find('img');
                    $img.attr('src', window.URL.createObjectURL(files[index]));
                });
            }
            , done: function (res, index, upload) {
                if (res.code == 200) { //上传成功
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(1).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(2).find('.demo-reload').hide();
                    $("#img-" + index).val(res.url);
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                } else {
                    this.error(index, upload);
                }

            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(1).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(2).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });

</script>

</body>
</html>
